<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
	<link rel="stylesheet" href="css/normalize.min.css" />
	<link rel="stylesheet" href="css/filter.css">
	<link rel="stylesheet" href="css/commoncss.css">
	<link rel="stylesheet" href="css/ion.rangeSlider.css" />
	<link rel="stylesheet" href="css/ion.rangeSlider.skinNice.css" id="styleSrc"/>
	<style>
		.irs-min, .irs-max {
		    display: none!important;
		}
		.irs-line-left {
		    background: #99a4ac;
		    height: 5px;
		}
		.irs-line-mid{
			background: #99a4ac;
			height: 5px;
		}
		.irs-line-right{
			background: #99a4ac;
			height: 5px;
		}
		.irs-line-right{
			height: 5px;
		}
		.irs-diapason{
			background: #16ace4;
		}
		.irs-grid{
			display: none!important;
		}
		.irs-diapason{
			height: 5px;
		}
		.irs-slider {
		    background: url(img/c.png) no-repeat;
		    background-position: 0 0px;
		    background-size: cover;
		}
		#irs-active-slider, .irs-slider:hover {
		    background-position: 0 0px;
		}
		
		.rw_4 .irs-slider.from{
			 display: none!important; 
		}
		.rw_4 .irs-line-left{
			background: #16ace4!important;
		}
		.rw_5 .irs-slider.from{
			 display: none!important; 
		}
		.rw_5 .irs-line-left{
			background: #16ace4!important;
		}
	</style>
</head>
<body>
	<div class="carHeader">
		<img src="images/2.png" alt="" class="back">
		<div class="hearderTitle">
			<div>FILTERS</div>
		</div>
		<div class="headerChoose">
			<span>CLEAR ALL</span>
		</div>
	</div>
	<div class="filterTitle">
		<div class="filterInner">
			<span>Price:$30.000-$90.000</span>
			<img src="images/13.png" alt="" class="closeBtn">
		</div>
		<div class="filterInner">
			<span>Acura</span>
			<img src="images/13.png" alt="" class="closeBtn">
		</div>
		<div class="filterInner">
			<span>Audi</span>
			<img src="images/13.png" alt="" class="closeBtn">
		</div>
		<div class="filterInner">
			<span>Bmw</span>
			<img src="images/13.png" alt="" class="closeBtn">
		</div>
		<div class="filterInner">
			<span>Infiniti</span>
			<img src="images/13.png" alt="" class="closeBtn">
		</div>
		<div class="filterInner">
			<span>Jaguar</span>
			<img src="images/13.png" alt="" class="closeBtn">
		</div>
		<div class="filterInner">
			<span>Lexus</span>
			<img src="images/13.png" alt="" class="closeBtn">
		</div>
		<div class="filterInner">
			<span>Mercedes-benzx</span>
			<img src="images/13.png" alt="" class="closeBtn">
		</div>
		<div class="filterInner">
			<span>Porsche</span>
			<img src="images/13.png" alt="" class="closeBtn">
		</div>
	</div>
	<div class="filterContent">
		<div class="areaWrap" idx="1">
			<span class="filterContentTitle">Make & MoDEL</span>
			<div class="fcimg">
				<span>113</span>
				<img src="images/14.png" alt="">
			</div>
		</div>
		
		<div class="modelInner area carwraps">
			<div class="modelCarsW" val="1">
				<div class="model">
					<img src="images/15.png" >
					<span>Acura</span>
				</div>
				<div class="areaInner">
					<div class="areaInnerDiv" val="100">
						<span>ILX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="101">
						<span>MDX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="102">
						<span>RDX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="103">
						<span>MDX</span>
						<img src="images/12.png" alt="">
					</div>
				</div>
			</div>
			<div class="modelCarsW" val="2">
				<div class="model">
					<img src="images/16.png" >
					<span>Alfa Romeo</span>
				</div>
				
				<div class="areaInner">
					<div class="areaInnerDiv" val="104">
						<span>ILX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="105">
						<span>MDX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="106">
						<span>RDX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="107">
						<span>MDX</span>
						<img src="images/12.png" alt="">
					</div>
				</div>
			</div>
			<div class="modelCarsW" val="3">
				<div class="model">
					<img src="images/17.png" >
					<span>Audi</span>
				</div>
				<div class="areaInner">
					<div class="areaInnerDiv" val="108">
						<span>ILX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="109">
						<span>MDX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="110">
						<span>RDX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="111">
						<span>MDX</span>
						<img src="images/12.png" alt="">
					</div>
				</div>
			</div>
			<div class="modelCarsW" val="4">
				<div class="model">
					<img src="images/18.png" >
					<span>AMW</span>
				</div>
				<div class="areaInner">
					<div class="areaInnerDiv" val="100">
						<span>ILX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="101">
						<span>MDX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="102">
						<span>RDX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="103">
						<span>MDX</span>
						<img src="images/12.png" alt="">
					</div>
				</div>
			</div>
			<div class="modelCarsW" val="5">
				<div class="model">
					<img src="images/19.png" >
					<span>Bulck</span>
				</div>
				<div class="areaInner">
					<div class="areaInnerDiv" val="100">
						<span>ILX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="101">
						<span>MDX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="102">
						<span>RDX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="103">
						<span>MDX</span>
						<img src="images/12.png" alt="">
					</div>
				</div>
			</div>
			<div class="modelCarsW" val="6">
				<div class="model">
					<img src="images/20.png" >
					<span>Cadillac</span>
				</div>
				<div class="areaInner">
					<div class="areaInnerDiv" val="100">
						<span>ILX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="101">
						<span>MDX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="102">
						<span>RDX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="103">
						<span>MDX</span>
						<img src="images/12.png" alt="">
					</div>
				</div>
			</div>
			<div class="modelCarsW" val="7">
				<div class="model">
					<img src="images/21.png" >
					<span>Chevrolet</span>
				</div>
				<div class="areaInner">
					<div class="areaInnerDiv" val="100">
						<span>ILX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="101">
						<span>MDX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="102">
						<span>RDX</span>
						<img src="images/12.png" alt="">
					</div>
					<div class="areaInnerDiv" val="103">
						<span>MDX</span>
						<img src="images/12.png" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="filterContent">
		<div class="areaWrap" idx="2">
			<span class="filterContentTitle">YEAR</span>
			<div class="fcimg">
				<img src="images/14.png" alt="">
			</div>
		</div>
		
		<div class="area">
			<div class="rangeWrap">
				<span>Range</span>
				<div class="cir" id="ran1">2 020</div>
				<div class="lin">-</div>
				<div class="cir" id="ran2">2 009</div>
			</div>
			<div class="rwrap rw_1">
				<input type="text" id="range_1" />
			</div>
			<div class="year">
				<span >2009</span>
				<span>2020</span>
			</div>
		</div>
	</div>
	<div class="filterContent">
		<div class="areaWrap" idx="3">
			<span class="filterContentTitle">MILEAGE</span>
			<div class="fcimg">
				<img src="images/14.png" alt="">
			</div>
		</div>
		
		<div class="area">
			<div class="rangeWrap">
				<span>Range</span>
				<div class="cir" id="ran3">105083</div>
				<div class="lin">-</div>
				<div class="cir" id="ran4">50</div>
			</div>
			<div class="rwrap rw_2">
				<input type="text" id="range_2" />
			</div>
			<div class="year">
				<span >50</span>
				<span>105083</span>
			</div>
		</div>
	</div>
	<div class="filterContent">
		<div class="areaWrap" idx="4">
		<span class="filterContentTitle">BODY YUPE</span>
		<div class="fcimg">
			<img src="images/14.png" alt="">
		</div>
		</div>
		
		<div class="modelInner area colorArea">
			<div class="modelCar ac">
				<img src="images/22.png" class="cimg" >
				<span>SUV</span>
				<img src="images/12.png" alt="" class="down">
			</div>
			<div class="modelCar ac">
				<img src="images/22.png"class="cimg" >
				<span>sEDAN</span>
				<img src="images/12.png" alt="" class="down">
			</div>
			<div class="modelCar ac">
				<img src="images/22.png"class="cimg" >
				<span>Coupe</span>
				<img src="images/12.png" alt="" class="down">
			</div>
			<div class="modelCar ac">
				<img src="images/22.png"class="cimg" >
				<span>Convertible</span>
				<img src="images/12.png" alt="" class="down">
			</div>
			<div class="modelCar ac">
				<img src="images/22.png"class="cimg" >
				<span>Hatchback</span>
				<img src="images/12.png" alt="" class="down">
			</div>
		</div>
	</div>
	<div class="filterContent">
		<div class="areaWrap" idx="5">
		<span class="filterContentTitle">PRICR & FINANCING</span>
		<div class="fcimg">
			<img src="images/14.png" alt="">
		</div>
		</div>
		
		<div class="area">
			<div class="rangeWrap">
				<span>Range</span>
				<div class="cir" id="ran20">$105083</div>
				<div class="lin">-</div>
				<div class="cir" id="ran21">$50</div>
			</div>
			<div class="rwrap rw_20">
				<input type="text" id="range_20" />
			</div>
			<div class="year">
				<span >$50</span>
				<span>$105,083</span>
			</div>
			
			<div class="rangeWrap">
				<span>Monthly Payment</span>
				<div class="cir" id="ran6">$1000</div>
			</div>
			<div class="rwrap rw_4">
				<input type="text" id="range_4" />
			</div>
			<div class="year">
				<span>$0</span>
				<span>$1000</span>
			</div>
			<div class="rangeWrap">
				<span>Cash Down</span>
				<div class="cir" id="ran8">$1000</div>
			</div>
			<div class="rwrap rw_5">
				<input type="text" id="range_5" />
			</div>
			<div class="year">
				<span>$0</span>
				<span>$1000</span>
			</div>
			<div class="rwInner">
				<div>Estimates calculated using 780 Vantage Score</div>
				<div>$80l income,72mo.loan term</div>
				<div class="words1">Get Your Personal Financing Terms</div>
			</div>
		</div>
	</div>
	<div class="filterContent">
		<div class="areaWrap" idx="6">
		<span class="filterContentTitle">FEATURES</span>
		<div class="fcimg">
			<img src="images/14.png" alt="">
		</div>
		</div>
		
		<div class="modelInner area colorArea">
			<div class="modelCars ac" val="8">
				<img src="images/23.png" >
				<span>Hands Free</span>
				<img src="images/12.png" alt="" class="down">
			</div>
			<div class="modelCars" val="9">
				<img src="images/24.png" >
				<span>Satelite Redio</span>
				<img src="images/12.png" alt="" class="down">
			</div>
			<div class="modelCars ac" val="10">
				<img src="images/25.png" >
				<span>Rear View Camera</span>
				<img src="images/12.png" alt="" class="down">
			</div>
			<div class="modelCars">
				<img src="images/26.png" val="11">
				<span>Power Driver Seat</span>
				<img src="images/12.png" alt="" class="down">
			</div>
			<div class="modelCars ac" val="12">
				<img src="images/27.png" >
				<span>keyless lgnition</span>
				<img src="images/12.png" alt="" class="down">
			</div>
			<div class="modelCars" val="13">
				<img src="images/28.png" >
				<span>Heated Seats</span>
				<img src="images/12.png" alt="" class="down">
			</div>
			<div class="modelCars" val="14">
				<img src="images/29.png" >
				<span>Leather Interlor</span>
				<img src="images/12.png" alt="" class="down">
			</div>
		</div>
	</div>
	<div class="filterContent">
		<div class="areaWrap" idx="7">
		<span class="filterContentTitle">COLORS</span>
		<div class="fcimg">
			<img src="images/14.png" alt="">
		</div>
		</div>
		
		<div class="modelInner area">
			<div class="modelCar ac">
				<img src="images/30.png" >
				<span>Black</span>
				<img src="images/12.png" alt="" class="down">
			</div>
			<div class="modelCar">
				<img src="images/31.png" >
				<span>Whilte</span>
				<img src="images/12.png" alt="" class="down">
			</div>
			<div class="modelCar ac">
				<img src="images/32.png" >
				<span>Gray</span>
				<img src="images/12.png" alt="" class="down">
			</div>
			<div class="modelCar">
				<img src="images/33.png" >
				<span>Silver</span>
				<img src="images/12.png" alt="" class="down">
			</div>
			<div class="modelCar">
				<img src="images/34.png" >
				<span>Silver</span>
				<img src="images/12.png" alt="" class="down">
			</div>
		</div>
	</div>
	<div class="filterContent">
		<div class="areaWrap" idx="8">
		<span class="filterContentTitle">FUEL & EFFICIENCY </span>
		<div class="fcimg">
			<img src="images/14.png" alt="">
		</div>
		</div>
		
		<div class="area">
			<div class="fullInner">
				<div class="fInnerTitle">Fuel Type</div>
				<div class="curTitle" val="15">GAS
					<img src="images/r.png" class="rr" alt="">
				</div>
				<div class="curTitle" val="16">HYBRID<img src="images/r.png" class="rr" alt=""></div>
				<div class="curTitle" val="17">ELECTRIC<img src="images/r.png" class="rr" alt=""></div>
				<div class="curTitle" val="18">OTHER<img src="images/r.png" class="rr" alt=""></div>
				
				<div class="rangeWrap">
					<span>MPG(Hwy)</span>
					<div class="cir" id="ran10">59</div>
					<div class="lin">-</div>
					<div class="cir" id="ran11">0</div>
				</div>
				<div class="rwrap rw_6">
					<input type="text" id="range_6" />
				</div>
				<div class="year">
					<span >0</span>
					<span>59</span>
				</div>
			</div>
		</div>
	</div>
	<div class="filterContent filterContentlast">
		<div class="areaWrap" idx="9">
		<span class="filterContentTitle">ENGINE & DRIVETRAIN</span>
		<div class="fcimg">
			<img src="images/14.png" alt="">
		</div>
		</div>
		
		<div class="area">
			<div class="fInnerTitle">Transmission</div>
			<div class="curTitle" val="19">AUTOMATIC<img src="images/r.png" class="rr" alt=""></div>
			<div class="curTitle" val="20">MANUAL<img src="images/r.png" class="rr" alt=""></div>
			
			<div class="fInnerTitle">Cylinders</div>
			<div class="curTitle" val="21">6<img src="images/r.png" class="rr" alt=""></div>
			<div class="curTitle" val="22">4<img src="images/r.png" class="rr" alt=""></div>
			
			
			<div class="fInnerTitle">Drive</div>
			<div class="curTitle" val="23">AWD<img src="images/r.png" class="rr" alt=""></div>
			<div class="curTitle" val="24">RWD<img src="images/r.png" class="rr" alt=""></div>
		</div>
	</div>
	<div class="submitBtn">
		<div class="submitBtnInner">
			APPLY AND SEE 285 RESULTS
		</div>
	</div>
</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/ion.rangeSlider.js"></script> 
<script>
	$("#range_1").ionRangeSlider({
	
		min: 2009,

		max: 2020,

		from:2009,

		to: 2020,

		type: 'double',//设置类型

		step: 1,

		prefix: "",//设置数值前缀

		postfix: "",//设置数值后缀

		prettify: true,

		hasGrid: true

	});

	
	$(".rw_1 .irs-to").bind('DOMNodeInserted', function(e) {  
		$("#ran1").html($(".rw_1 .irs-to").html()) 
	});
	$(".rw_1 .irs-from").bind('DOMNodeInserted', function(e) {
		$("#ran2").html($(".rw_1 .irs-from").html()) 
	});
	
	
	$("#range_2").ionRangeSlider({
	
		min: 50,
	
		max: 105083,
	
		from:50,
	
		to: 105083,
	
		type: 'double',//设置类型
	
		step: 1,
	
		prefix: "",//设置数值前缀
	
		postfix: "",//设置数值后缀
	
		prettify: true,
	
		hasGrid: true
	
	});
	
	
	$(".rw_2 .irs-to").bind('DOMNodeInserted', function(e) {  
		$("#ran3").html($(".rw_2 .irs-to").html()) 
	});
	$(".rw_2 .irs-from").bind('DOMNodeInserted', function(e) {
		$("#ran4").html($(".rw_2 .irs-from").html()) 
	});
	
	
	
	
	$("#range_4").ionRangeSlider({
	
		min: 0,
	
		max: 1000,
	
		from:0,
	
		to: 1000,
	
		type: 'double',//设置类型
	
		step: 1,
	
		prefix: "",//设置数值前缀
	
		postfix: "",//设置数值后缀
	
		prettify: true,
	
		hasGrid: true
	
	});
	
	
	$(".rw_4 .irs-to").bind('DOMNodeInserted', function(e) {  
		$("#ran6").html($(".rw_4 .irs-to").html()) 
	});
	$(".rw_4 .irs-from").bind('DOMNodeInserted', function(e) {
		$("#ran7").html($(".rw_4 .irs-from").html()) 
	});
	
	
	
	$("#range_5").ionRangeSlider({
	
		min: 0,
	
		max: 1000,
	
		from:0,
	
		to: 1000,
	
		type: 'double',//设置类型
	
		step: 1,
	
		prefix: "",//设置数值前缀
	
		postfix: "",//设置数值后缀
	
		prettify: true,
	
		hasGrid: true
	
	});
	
	
	$(".rw_5 .irs-to").bind('DOMNodeInserted', function(e) {  
		$("#ran8").html($(".rw_5 .irs-to").html()) 
	});
	$(".rw_5 .irs-from").bind('DOMNodeInserted', function(e) {
		$("#ran9").html($(".rw_5 .irs-from").html()) 
	});
	
	
	
	$("#range_6").ionRangeSlider({
	
		min: 0,
	
		max: 59,
	
		from:0,
	
		to: 59,
	
		type: 'double',//设置类型
	
		step: 1,
	
		prefix: "",//设置数值前缀
	
		postfix: "",//设置数值后缀
	
		prettify: true,
	
		hasGrid: true
	
	});
	
	
	$(".rw_6 .irs-to").bind('DOMNodeInserted', function(e) {  
		$("#ran10").html($(".rw_6 .irs-to").html()) 
	});
	$(".rw_6 .irs-from").bind('DOMNodeInserted', function(e) {
		$("#ran11").html($(".rw_6 .irs-from").html()) 
	});
	
	$(".back").on("click",function(){
		location.href="index.html"
	})
	
	$(".modelCar").on("click",function(e){
		e.stopPropagation();
		if($(this).hasClass("ac")){
			$(this).removeClass("ac")
		}else{
			$(this).addClass("ac")
		}
	})
	
	
	$("#range_20").ionRangeSlider({
	
		min: 0,
	
		max: 105083,
	
		from:0,
	
		to: 105083,
	
		type: 'double',//设置类型
	
		step: 1,
	
		prefix: "",//设置数值前缀
	
		postfix: "",//设置数值后缀
	
		prettify: true,
	
		hasGrid: true
	
	});
	
	
	$(".rw_20 .irs-to").bind('DOMNodeInserted', function(e) {  
		$("#ran20").html("$"+$(".rw_20 .irs-to").html()) 
	});
	$(".rw_20 .irs-from").bind('DOMNodeInserted', function(e) {
		$("#ran21").html("$"+$(".rw_20 .irs-from").html()) 
	});
	
	$(".areaWrap").on("click",function(){
		var idx = $(this).attr("idx")-1;
		$(".area").each(function(index,obj){
			if(index!=idx){
				$(this).hide()
			}
		})
		$(this).parent().find(".area").toggle();
		
	})
	$(".area").each(function(){
		$(this).hide()
	})
	
	$(".submitBtnInner").on("click",function(){
		location.href="long.html"
	});
	
	$(".closeBtn").on("click",function(){
		$(this).parent().remove();
	})
	
	
	
	$(".modelCars").on("click",function(e){
		e.stopPropagation();
		var v = ($(this).attr("val"))
		if($(this).hasClass("ac")){
			$(this).removeClass("ac");
			$(".filterTitle").find(".ca"+v).remove();
		}else{
			$(this).addClass("ac");
			var spanT=$(this).find("span")[0].innerHTML;
			$(".filterTitle").append('<div class="filterInner ca'+v+'">'+
				'<span>'+spanT+'</span>'+
				'<img src="images/13.png" alt="" class="closeBtn">'+
			'</div>')
		}
	})
	
	
	$(".areaInnerDiv").on("click",function(e){
		e.stopPropagation();
		var v = ($(this).attr("val"))
		if($(this).hasClass("acc")){
			$(this).removeClass("acc");
			$(".filterTitle").find(".ca"+v).remove();
		}else{
			$(this).addClass("acc");
			var spanT=$(this).find("span")[0].innerHTML;
			$(".filterTitle").append('<div class="filterInner ca'+v+'">'+
				'<span>'+spanT+'</span>'+
				'<img src="images/13.png" alt="" class="closeBtn">'+
			'</div>')
		}
	})
	
	$(".curTitle").on("click",function(){
		var v = ($(this).attr("val"))
		if($(this).hasClass("acc")){
			$(this).removeClass("acc")
			$(".filterTitle").find(".ca"+v).remove();
		}else{
			$(this).addClass("acc");
			var spanT=$(this).text();
			$(".filterTitle").append('<div class="filterInner ca'+v+'">'+
				'<span>'+spanT+'</span>'+
				'<img src="images/13.png" alt="" class="closeBtn">'+
			'</div>')
		}
	});
	
	$(".model").on("click",function(){
		var idx = $(this).index();
		console.log("idx:"+idx)
		$(".areaInner").each(function(index,obj){
			$(this).hide();
		})
		$(this).parent().find(".areaInner").toggle();
	})
</script>
</html>